import { Avatar } from 'antd-mobile'
import _, { isObject } from 'lodash'
import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Card, Tag, Image, ErrorBlock } from 'antd-mobile'
import { RightOutline, HeartOutline, FillinOutline, LikeOutline } from 'antd-mobile-icons'
import dayjs from 'dayjs'
import { base } from '../util'


const styles = {
    center: {
        display: "flex",
        alignItems: 'center',
        color: "#999"
    },
    flex: {
        display: "flex",
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        fontSize: 16
    }
}
const MyList: FC<{
    list: addmsType[],
    hasAudio?: true,
    isHot?: boolean,
    isTime?: boolean
}> = ({
    list,
    isHot,
    isTime
}) => {
        const onBodyClick = () => {

        }
        const onHeaderClick = () => {

        }
        // console.log(list);

        const LevelTypes = [
            [
                { label: '简单', value: 1 },
                { label: '复杂', value: 2 },
                { label: '困难', value: 3 },
                { label: '地狱', value: 4 },
                { label: '无解', value: 5 },
            ]
        ]
        
        return (
            <div>
                {list?.length > 0 ?
                    <div>
                        {
                            _.map(list, (item, index) => {

                                return (
                                    <Link key={index} to={'/detail/' + item._id + "?canpany=" + item.campany} >
                                        <Card
                                            title={
                                                item.campany
                                            }
                                            extra={<RightOutline />}
                                            onBodyClick={onBodyClick}
                                            onHeaderClick={onHeaderClick}
                                            style={{ borderRadius: '16px', marginTop: 10, border: '1px solid #ddd' }}
                                        >
                                            <div className='mt10' style={styles.center} >
                                                {/* <span>面试大侠:</span> */}
                                                <Avatar style={{ borderRadius: '50%', '--size': '25px' }} src={item.author?.avatar ? item.author.avatar?.replace(/public/, base) : ''}></Avatar>
                                                <span style={{ fontSize: 12 }} className='ml10'>{item.author?.username}</span>
                                            </div>
                                            <div className='mt10' style={styles.center} >
                                                <div>
                                                    面试地址: <span>{item.address}</span>
                                                </div>
                                            </div>
                                            <div className='mt10' style={{ ...styles.center, color: isTime ? "#f50" : '' }} >
                                                <div>
                                                    面试时间: <span>{dayjs(item.date).format('YYYY-MM-DD HH:mm')}</span>
                                                </div>
                                            </div>
                                            <div className='mt10' style={styles.center} >
                                                <div>
                                                    面试难度:
                                                    <span>
                                                        {/* { _.find(LevelTypes[0],(v:any,index)=>v.value==item.level[0])?.label} */}
                                                        {
                                                            LevelTypes[0][item.level[0] - 1]?.label
                                                        }
                                                    </span>
                                                </div>
                                            </div>
                                            <div className='mt10' style={{ ...styles.center, color: isHot ? "#f50" : '' }} >
                                                <div>
                                                    当前热度: <span>{item.hot}</span>
                                                </div>
                                            </div>
                                            <div className=''  >
                                                <div className="tag-list" style={{ display: 'flex', flexWrap: 'wrap' }}>
                                                    {
                                                        _.map(item.tags, (item, index) => {

                                                            return (
                                                                <Tag className="mt10 mr10 " color={'#2db7f5'} style={{ padding: 2 }} key={index} >
                                                                    {item.label}
                                                                </Tag>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>

                                            <div className='imgone mt10 ' style={{ marginTop: 10 }}>
                                                {
                                                    item.audioSrc ? <audio className='mt10' style={{ maxWidth: 280 }} src={item.audioSrc?.replace(/public/, base)} controls ></audio>
                                                        :
                                                        (item.imgs && item.imgs.length > 0 &&
                                                            <Image style={{ borderRadius: 10, height: 330 }} src={isObject(item.imgs[0]) ? item.imgs[0]?.imgSrc?.replace(/public/, base) : item.imgs[0]?.replace(/public/, base)} />
                                                        )
                                                }
                                            </div>
                                            {item.audioSrc && <div className="mt10">
                                                {
                                                    item.content
                                                }
                                            </div>}


                                            <div className="mt10">
                                                <div style={styles.flex}  >
                                                    <div style={styles.center}>
                                                        <LikeOutline />
                                                        <span>{item.likes}</span>
                                                    </div>
                                                    <div style={styles.center}>
                                                        <HeartOutline />
                                                        <span>{item.collects}</span>
                                                    </div>
                                                    <div style={styles.center}>
                                                        <FillinOutline />
                                                        <span>{item.pings}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </Card>
                                    </Link>
                                )
                            })
                        }
                    </div>
                    :
                    <div className="empty" style={{ marginTop: 60 }}>
                        <ErrorBlock status='empty'
                            title="暂无数据"
                        />
                    </div>
                }
            </div>
        )
    }

export default MyList